<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .triangle {
        position: relative;
        width: 200px;
        height: 60px;
        background-color: #f00;
      }
      .triangle::after {
        content: '';
        position: absolute;
        top: 7px;
        right: -18px;
        /* 23:控制上下的高度 17:控制左右的宽度 */
        border-top: 23px solid transparent;
        border-bottom: 23px solid transparent;
        border-left: 17px solid red;
      }
    </style>
  </head>
  <body>
    <div class="triangle"></div>

    <script></script>
  </body>
</html>
